<template>
	<uni-popup ref="popup_language_set" type="bottom" border-radius="16px 16px 0 0">
		<view class="pop-box pad-20">
			<view class="flex flex-between flex-center">
				<view class="col-000-8 font-18 font-600">
					<!-- 选择语言 -->
					{{ $t('controlPlay.title') }}
				</view>
				<view class="close" @click="closePopup">
					<uni-icons type="closeempty" color="rgba(0,0,0,0.4)" size="20"></uni-icons>
				</view>
			</view>
			<view class="m-t-40 list">
				<view class="item shadow" @click="change(item.title)" v-for="(item, index) in languageList" :key="index">
					<view class="left">
						<image class="img" :src="item.imgSrc" mode="widthFix"></image>
						<view class="font-14 col-000-8">
							{{item.title}}
						</view>
					</view>
					<view class="right" v-if="currentLanguage === item.title ">
						<uni-icons type="checkmarkempty" size="18"></uni-icons>
					</view>
				</view>
				<!-- <view class="item shadow">
					<view class="left">
						<image class="img" src="/static/images/usa.png" mode="widthFix"></image>
						<view class="font-14 col-000-8">
							English
						</view>
					</view>
					<view class="right" v-if="currentLanguage === 'English' ">
						<uni-icons type="checkmarkempty" size="18"></uni-icons>
					</view>
				</view> -->
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				currentLanguage: '',
				languageList: [{
						title: '简体中文',
						imgSrc: '/static/images/china.png'
					},
					{
						title: 'English',
						imgSrc: '/static/images/usa.png'
					}
				]
			}
		},
		created() {
			this.currentLanguage = uni.getStorageSync('CURRENT_LANG') == "en" ? 'English' : '简体中文'
		},
		methods: {
			open() {
				this.$refs.popup_language_set.open('bottom')
			},
			closePopup() {
				this.$refs.popup_language_set.close()
			},
			change(title) {
				let language = uni.getStorageSync('CURRENT_LANG')
				const globalData = getApp().globalData
				if (language === 'en') {
					language = globalData.locale = 'zh-Hans'
				} else {
					language = globalData.locale = 'en'
				}
				uni.setStorageSync('CURRENT_LANG', language)
				getApp().globalData.$i18n.locale = language;
				
				this.currentLanguage = title == '简体中文' ? '简体中文' : 'English'
			
			console.log('[LANGUAGE-SET] 语言切换完成:', language)
			
			// 关闭弹窗
			this.closePopup()
			
			// 发送语言切换事件,让各页面自行刷新内容
			uni.$emit("changeLanguage", language)
			
			// 强制刷新所有组件
			this.$forceUpdate()
		}
	}
}
</script>

<style lang="scss" scoped>
	.pop-box {
		width: 100%;
		background-color: #F3F3F3;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;

		.list {
			width: 100%;
			margin-bottom: 88rpx;

			.item {
				margin-bottom: 36rpx;
				padding: 20rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.img {
					width: 50rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>